import React from 'react';
import { Box, Tabs, TabList, TabPanels, TabPanel, chakra, useTab, useStyles } from '@chakra-ui/react';
import SignIn from './SignIn';
import SignUp from './SignUp';

const tabHover = {
  fontWeight: 700,
  color: '#ea6f5a',
  borderBottomColor: '#ea6f5a'
};

const StyledTab = chakra('button', { themeKey: 'Tabs.Tab' });

const CustomTab = React.forwardRef((props, ref) => {
  const tabProps = useTab({ ...props, ref });
  const isSelected = !!tabProps["aria-selected"];

  const styles = useStyles();

  return (
    <StyledTab
      __css={{
        ...styles.tab,
        fontSize: '18px',
        padding: '10px',
        borderBottom: '2px solid #FFF',
        ...(isSelected ? tabHover : {})
      }}
      {...tabProps}
      _focus={{outline: 'none'}}
      _hover={tabHover}
    >
      {tabProps.children}
    </StyledTab>
  )
});

function Form() {
  return (
    <Box
      pos="relative"
      w="100vw"
      h="100vh"
      bgColor="#F1F1F1"
    >
      <Box
        top="50%"
        left="50%"
        transform="translate(-50%, -296px)"
        w="400px"
        bgColor="white"
        p="50px 50px 30px"
        boxShadow="base"
        borderRadius="4px"
        pos="absolute"
      >
        <Tabs isFitted variant="unstyled">
          <TabList
            mb="50px"
            px="70px"
            color='#969696'
          >
            <CustomTab w="48px">登录</CustomTab>
            <Box w="40px" lineHeight="48px" fontWeight="bold" textAlign="center">·</Box>
            <CustomTab w="48px">注册</CustomTab>
          </TabList>
          <TabPanels>
            <TabPanel p="0">
              <SignIn />
            </TabPanel>
            <TabPanel p="0">
              <SignUp />
            </TabPanel>
          </TabPanels>
        </Tabs>
      </Box>
    </Box>
  );
}

export default Form;